<template>
<div style="height:100%">
  <div class="buttonarea">
    <div style="width:50%;margin:20px auto;text-align: center;">
       <label v-show='tip'>您还有{{available}}次机会刷新线索</label>
       <el-button  v-show='tip' type="primary" @click="reset" style="margin-left:20px">刷新线索</el-button>    
    </div> 
    <!-- <el-radio-group v-model="radio" style="margin:12px">
    <el-radio :label="2">企业</el-radio>
    <el-radio :label="1">个人</el-radio>
  </el-radio-group>
  <el-select v-model="value" placeholder="意向水平" >
      <el-option label="选择意向水平" value="0"></el-option>

      <el-option label="高" value="1"></el-option>
      <el-option label="普通" value="2"></el-option>
  </el-select>
  <div>
  <el-input placeholder="请输入内容" v-model="input5" class="input-with-select" style="margin:12px">
      <el-select v-model="select" slot="prepend" placeholder="请选择">
       <el-option label="选择搜索条件" value="0"></el-option>

      <el-option label="姓名" value="1"></el-option>
      <el-option label="电话" value="2"></el-option>
      <el-option label="单位名称" value="3"></el-option>
    </el-select>
    <el-button slot="append" icon="el-icon-search" @click="gosearch"></el-button>
 

  </el-input>
  </div> -->
  </div>
  <!-- <div>
  <el-table
    :data="tableData"
    stripe
    height="100%"
    border
    style="width: 98%;margin-left: 1%;">
    <el-table-column
      prop="created"
      label="创建时间"
      width="100">
    </el-table-column>
    <el-table-column
      prop="username"
      label="联系人"
      width="100">
    </el-table-column>
    <el-table-column
      prop="phone"
      label="联系电话">
    </el-table-column>
    <el-table-column
      prop="companyname"
      label="单位名称">
    </el-table-column>
     <el-table-column
      prop="website"
      label="公司官网">
    </el-table-column>
     <el-table-column
      prop="addr"
      label="所在地区">
    </el-table-column>
    <el-table-column
      prop="addr2"
      label="联系地址">
    </el-table-column>
    <el-table-column
      prop="password"
      label="线索类型">
    </el-table-column>
     <el-table-column
      prop="tag"
      label="标签"
      width="100"
      :filters="[{ text: '抢单成功', value: 1 }, { text: '待抢单', value: 0 }]"
      :filter-method="filterTag"
      filter-placement="bottom-end">
      <template slot-scope="scope">
        <el-tag
          :type="scope.row.owntag === 1 ? 'primary' : 'success'"
          disable-transitions>{{scope.row.owntag==1?'抢单成功':'待抢单'}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="120">
      <template slot-scope="scope">
      <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button
          @click.native.prevent="lockmember(scope.row.id,scope.row.index)"
          type="text"
          size="small" v-if="scope.row.owntag === 0">
          立即抢单
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  </div> -->
  <!-- 
  </div> -->
<div >
  <el-table
   
  :default-sort = "{prop: 'created',order:'descending'}"
    :data="tableData"
    style="width: 100%"
     max-height="600">
     <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <!-- <el-form-item label="联系电话">
            <span>{{ props.row.phone }}</span>
          </el-form-item> -->
            <el-form-item     label="需求说明" style="width:80%;">
            <span>{{ props.row.comment }}</span>
          </el-form-item>
          <el-form-item  v-if="props.row.manname"   label="联系人1">
            <span>{{ props.row.manname }}</span>
          </el-form-item>
           <el-form-item  v-if="props.row.phone"  label="电话">
            <span>{{ props.row.phone}}</span>
          </el-form-item>
          <el-form-item  v-if="props.row.work" label="职位">
            <span>{{ props.row.work }}</span>
          </el-form-item>
          <el-form-item   v-if="props.row.weixinhao" label="微信号">
            <span>{{ props.row.weixinhao }}</span>
          </el-form-item>
          <el-form-item  v-if="props.row.manname2"  label="联系人2">
            <span>{{ props.row.manname2 }}</span>
          </el-form-item>
           <el-form-item   v-if="props.row.phone2"  label="电话">
            <span>{{ props.row.phone2}}</span>
          </el-form-item>
          <el-form-item   v-if="props.row.work2"  label="职位">
            <span>{{ props.row.work2 }}</span>
          </el-form-item>
          <el-form-item   v-if="props.row.weixinhao2"  label="微信号">
            <span>{{ props.row.weixinhao2 }}</span>
          </el-form-item>
          <el-form-item v-if="props.row.manname3" label="联系人3">
            <span>{{ props.row.manname3 }}</span>
          </el-form-item>
           <el-form-item  v-if="props.row.phone3"  label="电话">
            <span>{{ props.row.phone3}}</span>
          </el-form-item>
          <el-form-item  v-if="props.row.work3"  label="职位">
            <span>{{ props.row.work3 }}</span>
          </el-form-item>
          <el-form-item  v-if="props.row.weixinhao3"  label="微信号">
            <span>{{ props.row.weixinhao3 }}</span>
          </el-form-item>

            <el-form-item v-if="props.row.customertype!=1&&props.row.hangye"  label="企业所属行业">
            <span>{{ props.row.hangye }}</span>
          </el-form-item>
           <el-form-item  v-if="props.row.customertype!=1&&props.row.yewu" label="企业主营业务">
            <span>{{ props.row.yewu}}</span>
          </el-form-item>
          <el-form-item v-if="props.row.customertype!=1&&props.row.guimo"  label="规模">
            <span>{{ props.row.guimo}}</span>
          </el-form-item>
          <el-form-item v-if="props.row.customertype!=1&&props.row.website"  label="企业官网">
            <span>{{ props.row.website }}</span>
          </el-form-item>
          <el-form-item v-if="props.row.customertype!=1&&props.row.gzh"  label="企业公众号">
            <span>{{ props.row.gzh }}</span>
          </el-form-item>

          <el-form-item  v-if="props.row.username"  label="客户名称">
            <span>{{ props.row.username }}</span>
          </el-form-item>

          <el-form-item v-if="props.row.addr2" label="联系地址">
            <span>{{ props.row.addr2 }}</span>
          </el-form-item>
            <!-- <el-form-item label="线索类型">
            <span>{{ props.row.type==1?'系统推荐':'自建'}}</span>
          </el-form-item>   -->

        </el-form>
      </template>
    </el-table-column>
        <el-table-column
    fixed
    align="center"
      label="线索编号"
      prop="id">
    </el-table-column>
    <el-table-column
    fixed
    align="center"
      label="客户类型"
      prop="customertype">
            <template slot-scope="scope">
     {{scope.row.customertype==1?'个人':'企业'}}
</template>
    </el-table-column>
    <el-table-column
    sortable
    fixed
     align="center"
      label="客户名称"
      prop="username">
    </el-table-column>
    <el-table-column
    sortable
    fixed
     align="center"
       prop="updatetag"
        :sort-method="sortupdatetag"
      label="意向水平">
      <template slot-scope="scope">
     {{scope.row.updatetag==1?'高':'普通'}}
</template>
    </el-table-column>
    <el-table-column
    fixed
     align="center"
      label="意向产品"
     
      prop="health">
    </el-table-column>
        <el-table-column
        sortable
        prop="created"
    fixed
     align="center"
      label="创建时间"
      >
       <template slot-scope="scope">
  <span>{{ getNowFormatDate(scope.row.created) }}</span>
      </template>
    </el-table-column>

      <el-table-column
    fixed
     align="center"
      label="所在地区"
      prop="addr">
    </el-table-column>


    <el-table-column
    fixed
     align="center"
      label="操作"
      width="80">
      <template slot-scope="scope">
        <el-button
          @click.native.prevent="lockmember(scope.row.id,scope.row.index)"
          type="text"
          size="small"  v-if="scope.row.owntag ===  0">
          立即抢单
        </el-button>
      </template>
    </el-table-column>
 
  </el-table>


 <div class="block" style='display:none'>
       <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="page"
      :page-size="10"
      background
      layout="total, prev, pager, next"
      :total="total">
    </el-pagination>
  </div>  

  </div>

  


  </div>
</template>

<script>
import { getpossiblemembers,lockmember } from '@/api/policy'

export default {
  name: 'lead',
  components: { },
    computed: {
  },
  data() {
    return {
      tip:false,
      available:'',
      page:1,
      website:'',
      input5:'',
      select:'0',
      radio:1,
    tableData: [ ],
     total:0,
     searchtag:0,
     value:'0',

    }
      
  },
  components:{


  },
  activated(){
    console.log('active')
    // this.getpossiblemembers(0);

  },
  mounted(){
          this.getpossiblemembers(0);

  },
  methods:{
    sortupdatetag(a,b)
    {
    
      var la=a.updatetag;
      var ra=b.updatetag;
           if(!a.updatetag)
           la=0;
           if(!b.updatetag)
           ra=0;
            //  console.log(la,ra)
           if(la>=ra)
           return 1;
           else 
           return -1;
    },
      getNowFormatDate(dt) {
        var date = new Date(dt);
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    },
    lockmember(id,index)
    {
        
     this.$loadingshow();
       lockmember({ id:id }).then(res => {
         this.$loadingclose();
        if (res.code == 200) {
       this.$toast('抢单成功')
       this.tableData[index].owntag=1;
        } 
        else{
          this.$toast(res.message)
        }
      },err=>{
             this.$loadingclose();
      });


    },
      reset()
    {
    this.page=1;
    this.total=0;
    this.searchtag=0;
    
    this.getpossiblemembers(1);



    },
    gosearch()
    {
    this.page=1;
    this.total=0;
    this.searchtag=1;
    this.getpossiblemembers(0);



    },
    getpossiblemembers(tag){

    this.$loadingshow();
       getpossiblemembers({refreshtag:tag, page:this.page,searchtag:this.searchtag,size:20,customertype:this.radio,key:this.select,keyword:this.input5,key2:this.value }).then(res => {
       this.$loadingclose();
       if (res.code == 200) {
              this.tip=true;
              this.tableData=res.result.list;
              if(this.searchtag==0)
              {
                localStorage.setItem('possiablemembers',JSON.stringify(this.tableData))
                this.available=71-res.message;
                if(this.available<=0)
                {
                     this.$toast('刷新次数已达71次，明天再来刷新')
                }

              }
              this.total=res.result.total;
              for(var i=0;i<this.tableData.length;i++)
              {
                   this.tableData[i].index=i;
                   this.tableData[i].typedesc=this.tableData[i].type==1?'重点':'普通'


              }
              //document.getElementsByClassName('el-table__body-wrapper')[0].style.height='auto';
        } 
        else{
          console.log('error')
          /*if(localStorage.getItem('possiablemembers') )
          {
          var cache= localStorage.getItem('possiablemembers');
 
          this.tableData=JSON.parse(cache);

              for(var i=0;i<this.tableData.length;i++)
              {
                 this.tableData[i].index=i;
                 this.tableData[i].typedesc=this.tableData[i].type==1?'重点':'普通'


              }


          }*/

          this.$toast(res.message)
        }
      });
    },
    
    filterTag(value,row){
return value===row.owntag;
    },
handleSizeChange(){
 console.log('size change')
},
handleCurrentChange(){
   this.getpossiblemembers(0);
  
},
handleClick(row) {
        console.log(row);
      },
  }
}
</script>

<style lang="scss" scoped>
.buttonarea{
  width:100%;
  // height: 50px;
}
.btn{
  position: relative;
    /* left: 73%; */
    float: right;
    right: 9px;
    margin-top: 6px;
}
.block{
      text-align: center;
      margin-top:10px;
}

.documentation-container {
  // margin: 50px;
  .document-btn {
    float: left;
    margin-left: 50px;
    display: block;
    cursor: pointer;
    background: black;
    color: white;
    height: 60px;
    width: 200px;
    line-height: 60px;
    font-size: 20px;
    text-align: center;
  }
}
   .popstyle{
        width: 100%;
        height: 30%;
    }
    .userfile{
    width: 90px;
    height: 30px;
    background: cornflowerblue;
    font-size: 14px;
    color: #fff;
    line-height: 30px;
    border-radius: 10px;
    text-align: center;
    margin: 0 auto;
    margin-top: 20px;
}
/deep/  .el-input--suffix .el-input__inner{
  width:140px;
}
/deep/ .el-form-item{
  width: 30%;
}
</style>
